<!-- 物流页面  -->
<template>
  <div class="main-app"
       v-loading="loading"
       element-loading-svg-view-box="-10, -10, 50, 50"
       element-loading-background="rgba(122, 122, 122, 0.8)"
  >
    <!--  顶部头部信息  -->
    <div class="main-app-top">
      <span>{{route?.meta?.title}}</span>
      <div class="filter1 filter-left">
        <el-select
            v-model="params.brand"
            class="select"
            placeholder="请选择品牌"
            @change="getInfo"
        >
          <el-option v-for="b in brandInfo" :value="b" :label="b"></el-option>
        </el-select>
      </div>
      <div class="filter1 filter-right">
        <!--  0:pcs,1:行数,2:发票数      -->
        <el-select
            v-model="params.filter"
            class="select"
            placeholder="请选择维度"
            clearable
            @change="getInfo"
        >
          <el-option v-for="f in FILTERS" :value="f.value" :label="f.label"></el-option>
        </el-select>
      </div>
    </div>
    <!--  中间内容信息  -->
    <div class="main-app-ctn">
      <div class="pie pie-1">
        <span>总库存</span>
        <basic-echarts-pie1
            :chartData="chartDataBox"
            @click="handleGoPage(dataList.total?.all_osb_id_list)"
        ></basic-echarts-pie1>
      </div>
      <div class="pie2">
        <!--  在途库存   -->
        <div class="pie2-box p2-1">
          <!--  在途库存   -->
          <div class="pie pie-2">
            <span>在途库存</span>
            <basic-echarts-pie1
                :chartData="chartDataBox1"
                @click="handleGoPage(dataList.zt?.all_osb_id_list)"
            ></basic-echarts-pie1>
          </div>
          <!--  是否到港   -->
          <div class="side-box">
            <!--  已到港   -->
            <div class="side-box-item side-box-1">
              <div class="pie pie-3">
                <span>已到港</span>
                <basic-echarts-pie1
                    :chartData="chartDataBox4"
                    @click="handleGoPage(dataList.port?.all_osb_id_list)"
                ></basic-echarts-pie1>
              </div>
              <div class="side-box-sub">
                <!--  为申报   -->
                <div class="side-box-sub-item">
                  <div class="pie pie-4">
                    <span>未申报</span>
                    <basic-echarts-pie1
                        :chartData="chartDataBox8"
                        :graphic="graphic1"
                        @click="handleGoPage(dataList.no_delcare?.all_osb_id_list)"
                    ></basic-echarts-pie1>
                  </div>
                  <div class="dell">
                    <div class="short-info">
                      <img src="@/assets/icons/logistics/icon4.png"/>
                      <span>正常</span>
                      <label>{{dataList.no_delcare?.normal}}</label>
                    </div>
                    <div class="short-info">
                      <img src="@/assets/icons/logistics/icon5.png"/>
                      <span>异常</span>
                      <label>{{dataList.no_delcare?.abnormal}}</label>
                    </div>
                  </div>
                </div>
                <!--  申报中   -->
                <div class="side-box-sub-item">
                  <div class="pie pie-4">
                    <span>申报中</span>
                    <basic-echarts-pie1
                        :chartData="chartDataBox9"
                        :graphic="graphic1"
                        @click="handleGoPage(dataList.ing_delcare?.all_osb_id_list)"
                    ></basic-echarts-pie1>
                  </div>
                  <div class="dell">
                    <div class="short-info">
                      <img src="@/assets/icons/logistics/icon4.png"/>
                      <span>正常</span>
                      <label>{{dataList.ing_delcare?.normal}}</label>
                    </div>
                    <div class="short-info">
                      <img src="@/assets/icons/logistics/icon5.png"/>
                      <span>异常</span>
                      <label>{{dataList.ing_delcare?.abnormal}}</label>
                    </div>
                  </div>
                </div>
                <!--  已申报   -->
                <div class="side-box-sub-item si1">
                  <div class="pie pie-4">
                    <span>已申报</span>
                    <basic-echarts-pie1
                        :chartData="chartDataBox10"
                        :graphic="graphic"
                        @click="handleGoPage(dataList.suc_delcare?.all_osb_id_list)"
                    ></basic-echarts-pie1>
                  </div>
                  <div class="sub-side">
                    <div class="sub-side-item">
                      <div class="pie pie-5">
                        <span>未放⾏</span>
                        <basic-echarts-pie1
                            :chartData="chartDataBox12"
                            :graphic="graphic2"
                            :title-style="titleStyle"
                            @click="handleGoPage(dataList.no_node_pass?.all_osb_id_list)"
                        ></basic-echarts-pie1>
                      </div>
                      <div class="dell">
                        <div class="short-info">
                          <img src="@/assets/icons/logistics/icon4.png"/>
                          <span>正常</span>
                          <label>{{dataList.no_node_pass?.normal}}</label>
                        </div>
                        <div class="short-info">
                          <img src="@/assets/icons/logistics/icon5.png"/>
                          <span>异常</span>
                          <label>{{dataList.no_node_pass?.abnormal}}</label>
                        </div>
                      </div>
                    </div>
                    <div class="sub-side-item">
                      <div class="pie pie-5">
                        <span>已放⾏</span>
                        <basic-echarts-pie1
                            :chartData="chartDataBox13"
                            :graphic="graphic2"
                            :title-style="titleStyle"
                            @click="handleGoPage(dataList.node_pass?.all_osb_id_list)"
                        ></basic-echarts-pie1>
                      </div>
                      <div class="dell">
                        <div class="short-info">
                          <img src="@/assets/icons/logistics/icon6.png"/>
                          <span>送货中</span>
                          <label>{{dataList.ing_deliver?.all}}</label>
                        </div>
                        <div class="short-info">
                          <img src="@/assets/icons/logistics/icon7.png"/>
                          <span>已送货</span>
                          <label>{{dataList.end_deliver?.all}}</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--  未到港   -->
            <div class="side-box-item side-box-2">
              <div class="pie pie-3 pie-3-1">
                <span>未到港</span>
                <basic-echarts-pie1
                    :chartData="chartDataBox5"
                    @click="handleGoPage(dataList.no_port?.all_osb_id_list)"
                ></basic-echarts-pie1>
              </div>
              <div class="dell">
                <div class="short-info">
                  <img src="@/assets/icons/logistics/icon1.png"/>
                  <span>新品</span>
                  <label>{{dataList.new_product?.all}}</label>
                </div>
                <div class="short-info">
                  <img src="@/assets/icons/logistics/icon2.png"/>
                  <span>老品</span>
                  <label>{{dataList.old_product?.all}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  在库库存   -->
        <div class="pie2-box">
          <div class="pie pie-2">
            <span>在库库存</span>
            <basic-echarts-pie1
                :chartData="chartDataBox2"
                @click="handleGoPage(dataList.zk?.all_osb_id_list)"
            ></basic-echarts-pie1>
          </div>
          <!--  是否查询   -->
          <div class="side-box">
            <!--  已查询   -->
            <div class="side-box-item side-box-3">
              <div class="pie pie-3">
                <span>已查询</span>
                <basic-echarts-pie1
                    :chartData="chartDataBox6"
                    @click="handleGoPage(dataList.query?.all_osb_id_list)"
                ></basic-echarts-pie1>
              </div>
              <div class="side-box-sub">
                <div class="side-box-sub-item">
                  <div class="pie pie-4">
                    <span>制造记号已解读</span>
                    <basic-echarts-pie1
                        :chartData="chartDataBox11"
                        :graphic="graphic"
                        @click="handleGoPage(dataList.make_mark?.all_osb_id_list)"
                    ></basic-echarts-pie1>
                  </div>
                  <div class="mark-box">
                    <div class="mark-box-1">
                      <div class="pie pie-5">
                        <span>标签未到库</span>
                        <basic-echarts-pie1
                            :chartData="chartDataBox14"
                            :graphic="graphic1"
                            :title-style="titleStyle"
                            @click="handleGoPage(dataList.no_label_sto?.all_osb_id_list)"
                        ></basic-echarts-pie1>
                      </div>
                      <div class="mark-box-item">
                        <div class="mark-box-item-sub">
                          <div class="pie pie-6">
                            <span>标签无版</span>
                            <basic-echarts-pie1
                                :chartData="chartDataBox16"
                                :graphic="graphic3"
                                :title-style="titleStyle1"
                                @click="handleGoPage(dataList.no_copy_right?.all_osb_id_list)"
                            ></basic-echarts-pie1>
                          </div>
                          <div class="dell">
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon4.png"/>
                              <span>正常</span>
                              <label>{{dataList.no_copy_right?.normal}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon5.png"/>
                              <span>异常</span>
                              <label>{{dataList.no_copy_right?.abnormal}}</label>
                            </div>
                          </div>
                        </div>
                        <div class="mark-box-item-sub">
                          <div class="pie pie-6">
                            <span>标签有版</span>
                            <basic-echarts-pie1
                                :chartData="chartDataBox17"
                                :graphic="graphic3"
                                :title-style="titleStyle1"
                                @click="handleGoPage(dataList.copy_right?.all_osb_id_list)"
                            ></basic-echarts-pie1>
                          </div>
                          <div class="dell">
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon4.png"/>
                              <span>正常</span>
                              <label>{{dataList.copy_right?.normal}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon5.png"/>
                              <span>异常</span>
                              <label>{{dataList.copy_right?.abnormal}}</label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="mark-box-2">
                      <div class="pie pie-5">
                        <span>标签已到库</span>
                        <basic-echarts-pie1
                            :chartData="chartDataBox15"
                            :graphic="graphic"
                            @click="handleGoPage(dataList.label_sto?.all_osb_id_list)"
                        ></basic-echarts-pie1>
                      </div>
                      <div class="mark-box-item">
                        <div class="mark-box-item-sub is2">
                          <div class="pie pie-6">
                            <span>未贴标</span>
                            <basic-echarts-pie1
                                :chartData="chartDataBox18"
                                :graphic="graphic3"
                                :title-style="titleStyle1"
                                @click="handleGoPage(dataList.no_label?.all_osb_id_list)"
                            ></basic-echarts-pie1>
                          </div>
                          <div class="dell">
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon4.png"/>
                              <span>正常</span>
                              <span>计划</span>
                              <label>{{dataList.no_label_normal?.all}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon5.png"/>
                              <span>异常</span>
                              <span>计划</span>
                              <label>{{dataList.no_label_abnormal?.all}}</label>
                            </div>
                          </div>
                        </div>
                        <div class="mark-box-item-sub is2">
                          <div class="pie pie-6">
                            <span>贴标中</span>
                            <basic-echarts-pie1
                                :chartData="chartDataBox19"
                                :graphic="graphic3"
                                :title-style="titleStyle1"
                                @click="handleGoPage(dataList.ing_label?.all_osb_id_list)"
                            ></basic-echarts-pie1>
                          </div>
                          <div class="dell">
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon4.png"/>
                              <span>贴标</span>
                              <span>正常</span>
                              <label>{{dataList.ing_label_normal?.all}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon5.png"/>
                              <span>贴标</span>
                              <span>异常</span>
                              <label>{{dataList.ing_label_abnormal?.all}}</label>
                            </div>
                          </div>
                        </div>
                        <div class="mark-box-item-sub is1">
                          <div class="pie pie-6">
                            <span>已贴标</span>
                            <basic-echarts-pie1
                                :chartData="chartDataBox20"
                                :graphic="graphic3"
                                :title-style="titleStyle1"
                                @click="handleGoPage(dataList.end_label?.all_osb_id_list)"
                            ></basic-echarts-pie1>
                          </div>
                          <div class="dell">
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon8.png"/>
                              <span>未商检</span>
                              <span>待出库</span>
                              <label>{{dataList.normal_no_check?.all}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon9.png"/>
                              <span>已商检</span>
                              <span>待出库</span>
                              <label>{{dataList.normal_check?.all}}</label>
                            </div>
                            <div class="short-info">
                              <img src="@/assets/icons/logistics/icon10.png"/>
                              <span>已商检异</span>
                              <span>常未出库</span>
                              <label>{{dataList.abnormal_check?.all}}</label>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="short-info">
                  <img src="@/assets/icons/logistics/icon3.png"/>
                  <span>制造记号解读中</span>
                  <label>{{dataList.no_make_mark?.all}}</label>
                </div>
              </div>
            </div>
            <!--  未查询   -->
            <div class="side-box-item side-box-4">
              <div class="pie pie-3 pie-3-1">
                <span>未查询</span>
                <basic-echarts-pie1
                    :chartData="chartDataBox7"
                    @click="handleGoPage(dataList.no_query?.all_osb_id_list)"
                ></basic-echarts-pie1>
              </div>
              <div class="dell">
                <div class="short-info">
                  <img src="@/assets/icons/logistics/icon4.png"/>
                  <span>正常</span>
                  <label>{{dataList.no_query?.normal}}</label>
                </div>
                <div class="short-info">
                  <img src="@/assets/icons/logistics/icon5.png"/>
                  <span>异常</span>
                  <label>{{dataList.no_query?.abnormal}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--  短少   -->
        <div class="short-info">
          <img src="@/assets/icons/logistics/short-img.png"/>
          <span>短少</span>
          <label>{{dataList.short?.all}}</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {FILTERS} from '@/config/index.ts'
import {useBaseStore} from "@/store";
import BasicEchartsPie1 from "@/components/basicEchartsPie1.vue";
import {getNodeAllListApi} from "@/api/modules/base";
import {fontSizeRem} from "@/utils/baseCfg";

defineOptions({
  name: 'logisticsView'
})
// 加载进度
const loading = ref<boolean>(false)
const {brandInfo} = useBaseStore()
interface interfaceParam{
  filter: number // 维度
  brand: number // 品牌
}
// 请求参数
let params = reactive<interfaceParam>({
  filter: 0,
  brand: brandInfo[0]
})
const graphic = {
  top: 60,
  width: 90,
  height: 90
}
const graphic1 = {
  top: 70,
  width: 70,
  height: 70
}
const graphic2 = {
  top: 40,
  width: 50,
  height: 50
}
const graphic3 = {
  top: 40,
  width: 40,
  height: 40
}
const titleStyle = {
  titleSize: fontSizeRem(14),
  subtitleSize: fontSizeRem(12),
}
const titleStyle1 = {
  titleSize: fontSizeRem(12),
  subtitleSize: fontSizeRem(8),
}
// 总库存
let chartDataBox: any = ref({});
// 在途库存
let chartDataBox1: any = ref({});
// 在库库存
let chartDataBox2: any = ref({});
// 已到港
let chartDataBox4: any = ref({});
// 未到岗
let chartDataBox5: any = ref({});
// 已查询
let chartDataBox6: any = ref({});
// 未查询
let chartDataBox7: any = ref({});
//未申报
let chartDataBox8: any = ref({});
// 申报中
let chartDataBox9: any = ref({});
// 已申报
let chartDataBox10: any = ref({});
// 制造记号已解读
let chartDataBox11: any = ref({});
// 未放行
let chartDataBox12: any = ref({});
// 已放⾏
let chartDataBox13: any = ref({});
// 标签未到库
let chartDataBox14: any = ref({});
// 标签已到库
let chartDataBox15: any = ref({});
// 标签无版
let chartDataBox16: any = ref({});
// 标签有版
let chartDataBox17: any = ref({});
// 未贴标
let chartDataBox18: any = ref({});
// 贴标中
let chartDataBox19: any = ref({});
// 已贴标
let chartDataBox20: any = ref({});
// 后端回显数据
let dataList = reactive({})
// 后台获取数据
const getInfo = async () => {
  loading.value = true
  // 获取节点跟踪+详情接口
  const {data} = await getNodeAllListApi(params)
  dataList = data
  if(data){
    //总库存
    chartDataBox.value = {
      count: data.total.all,
      dataList: [
        {value: data.total.normal, name: '正常'},
        {value: data.total.abnormal, name: '异常'}
      ]
    }
    // 在途库存
    chartDataBox1.value = {
      count: data.zt.all,
      dataList: [
        {value: data.zt.normal, name: '正常'},
        {value: data.zt.abnormal, name: '异常'}
      ]
    }
    // 在库库存
    chartDataBox2.value = {
      count: data.zk.all,
      dataList: [
        {value: data.zk.normal, name: '正常'},
        {value: data.zk.abnormal, name: '异常'}
      ]
    }
    // 已到港
    chartDataBox4.value = {
      count: data.port.all,
      dataList: [
        {value: data.port.normal, name: '正常'},
        {value: data.port.abnormal, name: '异常'},
      ]
    }
    // 未到港
    chartDataBox5.value = {
      count: data.no_port.all,
      dataList: [
        {value: data.no_port.normal, name: '正常'},
        {value: data.no_port.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 已查询
    chartDataBox6.value = {
      count: data.query.all,
      dataList: [
        {value: data.query.normal, name: '正常'},
        {value: data.query.abnormal, name: '异常'},
      ]
    }
    // 未查询
    chartDataBox7.value = {
      count: data.no_query.all,
      dataList: [
        {value: data.no_query.normal, name: '正常'},
        {value: data.no_query.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 未申报
    chartDataBox8.value = {
      count: data.no_delcare.all,
      dataList: [
        {value: data.no_delcare.normal, name: '正常'},
        {value: data.no_delcare.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 申报中
    chartDataBox9.value = {
      count: data.ing_delcare.all,
      dataList: [
        {value: data.ing_delcare.normal, name: '正常'},
        {value: data.ing_delcare.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 已申报
    chartDataBox10.value = {
      count: data.suc_delcare.all,
      dataList: [
        {value: data.suc_delcare.normal, name: '正常'},
        {value: data.suc_delcare.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 制造记号已解读
    chartDataBox11.value = {
      count: data.make_mark.all,
      dataList: [
        {value: data.make_mark.normal, name: '正常'},
        {value: data.make_mark.abnormal, name: '异常'},
      ]
    }
    //未放⾏
    chartDataBox12.value = {
      count: data.no_node_pass.all,
      dataList: [
        {value: data.no_node_pass.normal, name: '正常'},
        {value: data.no_node_pass.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 已放⾏
    chartDataBox13.value = {
      count: data.node_pass.all,
      dataList: [
        {value: data.node_pass.normal, name: '正常'},
        {value: data.node_pass.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 标签未到库
    chartDataBox14.value = {
      count: data.no_label_sto.all,
      dataList: [
        {value: data.no_label_sto.normal, name: '正常'},
        {value: data.no_label_sto.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 标签已到库
    chartDataBox15.value = {
      count: data.label_sto.all,
      dataList: [
        {value: data.label_sto.normal, name: '正常'},
        {value: data.label_sto.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 标签无版
    chartDataBox16.value = {
      count: data.no_copy_right.all,
      dataList: [
        {value: data.no_copy_right.normal, name: '正常'},
        {value: data.no_copy_right.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 标签有版
    chartDataBox17.value = {
      count: data.copy_right.all,
      dataList: [
        {value: data.copy_right.normal, name: '正常'},
        {value: data.copy_right.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 未贴标
    chartDataBox18.value = {
      count: data.no_label.all,
      dataList: [
        {value: data.no_label.normal, name: '正常'},
        {value: data.no_label.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 贴标中
    chartDataBox19.value = {
      count: data.ing_label.all,
      dataList: [
        {value: data.ing_label.normal, name: '正常'},
        {value: data.ing_label.abnormal, name: '异常'},
      ],
      showLabel: false
    }
    // 已贴标
    chartDataBox20.value = {
      count: data.end_label.all,
      dataList: [
        {value: data.end_label.normal, name: '正常'},
        {value: data.end_label.abnormal, name: '异常'},
      ],
      showLabel: false
    }

    loading.value = false
  }
}
// 获取路由信息
const route = useRoute()
// 页面明细页跳转 todo
const handleGoPage = (idList) => {
  debugger
  const osb_id_list = idList.join(',')
  // 跳转到别的系统链接
  window.location.href = `http://zst.zlocr.com/order/detail?osb_id_list=${osb_id_list}`
}
onMounted( async ()=>{
  await getInfo()
})
</script>

<style lang="scss" scoped>
@use 'logistics';
</style>
